<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
    <h2>颜色选择</h2>
    <input type="color" value="#ffffff" name="color">
    <h2>邮箱输入</h2>
    <input type="email" name="email">
    <h2>url地址输入</h2>
    <input type="url">
    <h2>电话号码输入</h2>
    <!-- 手机端才由于 tel -->
    <input type="tel">
    <h2>滑块效果</h2>
    <!-- step 步长
        min  最小值
        max  最大值
     -->
    <input type="range" min="100" max="200" value="100" step="10">
    <h2>输入数字</h2>
    <!-- 和range有相同的属性  -->
    <input type="number">
    <h2>搜索类型</h2>
    <input type="search">
    <h2>日期选择</h2>
    日期选择<input type="date">
    月份选择<input type="month">
    周选择<input type="week" name="" id="">
    精确时间<input type="datetime-local" name="" id="">
</form>
</body>
</html>